<template>
  <div style="width: 100%;height: 100%;" id="water">
    <van-nav-bar :title="time+'水库水情'" left-text="返回"   @click-left="onClickLeft"/>
    <van-tabs v-model="active">
      <van-tab title="实时数据">
        <div style="width: 100%;height: calc(100vh - 76px); ">
          <table-data></table-data>
        </div>
      </van-tab>
      <van-tab title="测站定位">
        <div style="width:100%;height: calc(100vh - 81px); margin-top: 5px;">
          <water-map></water-map>
        </div>

      </van-tab>
<!--      <van-tab title="数据汇总">-->
<!--        <div style="width: 100%;height: calc(100vh - 76px); padding-top: 10px; ">-->
<!--          <static></static>-->
<!--        </div>-->
<!--      </van-tab>-->
    </van-tabs>


  </div>

</template>

<script>
  import Map from "./WaterMap.vue"
  import TableData from "./TableData.vue"
  import Static from "./Static.vue"
  import API from "../../api/api_common_b";

  export default {
    name: 'HelloWorld',
    components: {
      "water-map": Map,
      "table-data": TableData,
      "static": Static,
    },
    data() {
      return {
        active: "测站定位",
        time:""
      }
    },
      mounted(){
        this.getTime();
      },
    methods: {
        onClickLeft(){
            this.$router.go(-1)

        },
        getTime() {
            API.getMaxTime().then(res => {
                console.log(res);
                this.time = res.recordset[0].TM.replace("T", " ").substring(0, 16);
            }).catch(err => {
                console.log(err);
                Notify({type: 'danger', message: '获取最新统计时间失败'});
            }).finally(() => {
                this.loading = false;
            })
        }
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  #water {

    // background-color: rgba(0, 0, 0, 0.1);
    .van-col {
      text-align: center;
    }

    .van-divider {
      border-color: #ddd;
    }

    .van-tab__pane {
      background-color: #F4F4F4;
    }

    .van-tabs__line {
      background-color: #a26bff;
    }

    // .van-tabs {
    //    .van-tabs__nav--card{
    //      .van-tab--active {
    //        background-color: #3d9dff ;
    //      };
    //    }
    //   .van-tab{
    //     background-color: white;

    //   }
    // }
  }
</style>
